<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, common } from '@utils';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['refresh']);

const visible = ref(false);
const formRef = ref();
const tabName = ref(1);
const data = ref();
const title = ref('');
const disabledRentDateData = ref();
const rentTitleTextVal = ref();
const pageSize = ref(20);
const total = ref();
const pageNum = ref(1);
const state = reactive({
    param: {},
    companyIds: [],
});

const rules = {
    profitType: [{ required: true, message: '请选择', trigger: 'change' }],
    firstProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    twoProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    threeProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    fourProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    fiveProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    sixProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    sevenProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    eightProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    nineProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    tenProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    elevenProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
    twelveProfitRate: [{ required: true, message: '请输入', trigger: 'blur' }],
};

const open = (type, item, disabledRentDate, rentTitleText) => {
    disabledRentDateData.value = disabledRentDate;
    rentTitleTextVal.value = rentTitleText;
    getSettingData();
    if (type == '分成') {
        state.param = { ...item };
        getData(item.companyId);
    } else if (type == '批量分成') {
        state.companyIds = item;
    }
    state.param.profitType = state.param.profitType ? state.param.profitType : 1
    title.value = type;
    visible.value = true;
};
const sizeChange = size => {
    pageSize.value = size;
    getData(state.param.companyId);
};
const selectPage = pageNo => {
    pageNum.value = pageNo;
    getData(state.param.companyId);
};
const close = () => {
    visible.value = false;
    state.param = {};
    data.value = null;
    tabName.value = 1;
};
const getSettingData = () => {
    disabledRentDateData.value.forEach(item => {
        rules['profitRate' + item.day] = [{ required: true, message: '请输入', trigger: 'blur' }];
        switch (item.day * 1) {
            case 30:
                item.rentTitle = '单期';
                break;
            case 60:
                item.rentTitle = '两期';
                break;
            case 90:
                item.rentTitle = '三期';
                break;
            case 120:
                item.rentTitle = '四期';
                break;
            case 150:
                item.rentTitle = '五期';
                break;
            case 180:
                item.rentTitle = '六期';
                break;
            case 210:
                item.rentTitle = '七期';
                break;
            case 240:
                item.rentTitle = '八期';
                break;
            case 270:
                item.rentTitle = '九期';
                break;
            case 300:
                item.rentTitle = '十期';
                break;
            case 330:
                item.rentTitle = '十一期';
                break;
            default:
                item.rentTitle = '十二期';
                break;
        }
    });
};
const getData = async companyId => {
    let res = await service.auth.companyRates(pageNum.value, pageSize.value, { targetId: companyId });
    total.value = res.count;
    res.list.forEach(jtem => {
        let rwoProfitRate = '';
        disabledRentDateData.value.forEach(item => {
            if (item.status != 0) {
                rwoProfitRate += `${JSON.parse(jtem.response)['profitRate' + item.day]}%/`;
            }
        });
        jtem.rwoProfitRate = rwoProfitRate.substring(0, rwoProfitRate.length - 1);
    });
    data.value = res.list;
};

const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};
const realSubmit = async () => {
    let res;
    if (title.value == '批量分成') {
        let companyIds = state.companyIds;
        state.param.companyIds = companyIds;
        res = await service.auth.companyRateEdits(toRaw(state.param));
    } else if (title.value == '分成') {
        res = await service.auth.companyRateEdit(toRaw(state.param));
    }

    if (res) {
        ElMessage.success('修改成功');
        close();
        emit('refresh');
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <div class="dialogDiv">
        <el-dialog v-model="visible" :title="title" center :close-on-click-modal="false" @close="close" destroy-on-close :width="800">
            <el-tabs type="border-card" v-model="tabName">
                <el-tab-pane label="设置分成" :name="1">
                    <section>
                        <el-form :model="state.param" :rules="rules" ref="formRef" label-width="160px" label-suffix=":" onsubmit="return false;">
                            <!-- <el-form-item label="平台分成比例" prop="profitRate">
                                <el-input
                                    v-model="state.param.profitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item> -->
                            <el-form-item label="扣除方式" prop="profitType">
                                <el-radio-group v-model="state.param.profitType">
                                    <el-radio :label="1">分成每期扣除</el-radio>
                                    <el-radio :label="2">分成一次性扣除</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <template v-for="item in disabledRentDateData">
                                <el-form-item :label="`${item.rentTitle}${item.day}天`" v-if="item.status != 0" :prop="'profitRate' + item.day">
                                    <el-input v-model="state.param['profitRate' + item.day]" type="number" placeholder="请输入" clearable>
                                        <template #append>%</template>
                                    </el-input>
                                </el-form-item>
                            </template>
                            <!-- <el-form-item
                                label="单期30天"
                                v-if="disabledRentDateData[0].status != 0"
                                prop="firstProfitRate"
                            >
                                <el-input
                                    v-model="state.param.firstProfitRate"
                                    type="number"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="两期60天"
                                v-if="disabledRentDateData[1].status != 0"
                                prop="twoProfitRate"
                            >
                                <el-input
                                    v-model="state.param.twoProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="三期90天"
                                v-if="disabledRentDateData[2].status != 0"
                                prop="threeProfitRate"
                            >
                                <el-input
                                    v-model="state.param.threeProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="四期120天"
                                v-if="disabledRentDateData[3].status != 0"
                                prop="fourProfitRate"
                            >
                                <el-input
                                    v-model="state.param.fourProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="五期150天"
                                v-if="disabledRentDateData[4].status != 0"
                                prop="fiveProfitRate"
                            >
                                <el-input
                                    v-model="state.param.fiveProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="六期180天"
                                v-if="disabledRentDateData[5].status != 0"
                                prop="sixProfitRate"
                            >
                                <el-input
                                    v-model="state.param.sixProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="七期210天"
                                v-if="disabledRentDateData[6].status != 0"
                                prop="sevenProfitRate"
                            >
                                <el-input
                                    v-model="state.param.sevenProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="八期240天"
                                v-if="disabledRentDateData[7].status != 0"
                                prop="eightProfitRate"
                            >
                                <el-input
                                    v-model="state.param.eightProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="九期270天"
                                v-if="disabledRentDateData[8].status != 0"
                                prop="nineProfitRate"
                            >
                                <el-input
                                    v-model="state.param.nineProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="十期300天"
                                v-if="disabledRentDateData[9].status != 0"
                                prop="tenProfitRate"
                            >
                                <el-input
                                    v-model="state.param.tenProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="十一期330天"
                                v-if="disabledRentDateData[10].status != 0"
                                prop="elevenProfitRate"
                            >
                                <el-input
                                    v-model="state.param.elevenProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                label="十二期360天"
                                v-if="disabledRentDateData[11].status != 0"
                                prop="twelveProfitRate"
                            >
                                <el-input
                                    v-model="state.param.twelveProfitRate"
                                    placeholder="请输入"
                                    clearable
                                >
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item> -->
                        </el-form>
                    </section>
                </el-tab-pane>
                <el-tab-pane label="分成记录" :name="2" v-if="title == '分成'">
                    <vxe-table :data="data" highlight-hover-row round stripe border height="250" class="mytable-scrollbar">
                        <vxe-column field="createTime" title="设置时间" width="160" />
                        <vxe-column field="createBy" title="操作人" width="200" />
                        <vxe-column field="subTypeDesc" title="分成类型" width="200" />
                        <!-- <vxe-column title="平台分成" width="200">
                            <template #default="{ row }">
                                {{
                                    typeof row.platformProfitRate == 'number'
                                        ? `${row.platformProfitRate}%`
                                        : '-'
                                }}
                            </template>
                        </vxe-column> -->
                        <vxe-column :title="`租期${rentTitleTextVal}平台分成`" field="rwoProfitRate" />
                        <!-- <vxe-column title="租期一个月平台分成"></vxe-column>
                            <template #default="{ row }">
                                {{
                                    typeof row.platformFirstProfitRate == 'number'
                                        ? `${row.platformFirstProfitRate}%`
                                        : '-'
                                }}
                            </template>
                        </vxe-column>
                        <vxe-column title="租期三个月平台分成">
                            <template #default="{ row }">
                                {{
                                    typeof row.platformThreeProfitRate == 'number'
                                        ? `${row.platformThreeProfitRate}%`
                                        : '-'
                                }}
                            </template>
                        </vxe-column>
                        <vxe-column title="租期六个月平台分成">
                            <template #default="{ row }">
                                {{
                                    typeof row.platformSixProfitRate == 'number'
                                        ? `${row.platformSixProfitRate}%`
                                        : '-'
                                }}
                            </template>
                        </vxe-column> -->
                    </vxe-table>
                    <el-pagination background size="small" :pager-count="5" @size-change="sizeChange" @current-change="selectPage" :current-page="pageNum" :page-sizes="[20, 50, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                </el-tab-pane>
            </el-tabs>
            <template #footer v-if="tabName === 1">
                <span class="flex-align-end">
                    <div class="margin-right20">
                        <el-button @click="close">取消</el-button>
                    </div>
                    <el-button type="primary" @click="sure">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
:deep(.el-tabs__content) {
    max-height: 300px;
    overflow: auto;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
    background-color: #ffffff;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
    background-color: #ffffff;
}
</style>
